import React, { PureComponent } from 'react';
import {
  Text,
  View
} from 'react-native';
import { WhiteSpace, WingBlank, Card } from 'antd-mobile';
import Echarts from 'native-echarts';
import { Urls } from '../utils/Urls';
export class IndexScreenChart extends PureComponent {
  
  constructor(props) {
    super(props)
    this.state = {
      keys: [],
      data: []
    }
  }
  componentDidMount() {

    let url = Urls.TEN_MAX_TEMPER;
    fetch(url)
      .then((response) => {
        const responsejson = JSON.parse(response._bodyInit);
        console.log("这里是：", responsejson);
        let keys = [], data = []
        responsejson.content.forEach(element => {
            keys.push(element.stationName + ": " + element.name)
            data.push(element.alarms)
        });
        this.setState({
            keys: keys,
            data: data
        })
        // this.setState({
        //   data:[10, 52, 200, 334, 390, 330, 220]
        // })
        // t.render();
      })
      .catch((error) => {
        console.log(error);
      })
  }
  render() {
    let option = {
      title : {
        text: '各变电站最高温度',
        subtext: '最新'
      },
      grid: {
        left: 20,
        top: 90,
        right: 20,
        bottom: 0,
        containLabel: true
      },
      tooltip: {},
      xAxis: {
        data: this.state.keys
      },
      yAxis: {},
      series: [{
        name: '实时温度',
        type: 'bar',
        itemStyle: {
          normal: { color: '#1296db' }
        },
        data: this.state.data
      }],
      visualMap: {
        top: 10,
        right: 0,
        pieces: [{
          gt: 0,
          lte: 45,
          color: '#16c218'
        }, {
          gt: 45,
          lte: 60,
          color: '#ff9224'
        }, {
          gt: 60,
          color: '#f11312'
        }],
        outOfRange: {
          color: '#999'
        }
      },
    }
    return (
      <WingBlank size="sm">
        <WhiteSpace size="sm" />
        <Card>
          <Card.Header
            title={this.state.title}
          />
          <Card.Body>
            <View style={{ width: '100%', height: 400 }}>
              <Echarts option={option} />
            </View>
          </Card.Body>
          {/* <Card.Footer content="footer content" /> */}
        </Card>
      </WingBlank>
    );
  }
}
